<template>
  <div class="pad-content-box form-no-padding-box">
    <section class="justify-center padding-10 padding-top-20 padding-bottom-15 border-bottom-D8D8D8">
      <span class="font-size-16 font-weight-bold margin-right-15">收入核算统计</span>
    </section>

    <section class="align-center padding-30 border-bottom-D8D8D8">
      <section class="flex-1">
        <div class="margin-bottom-30">
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statisticsObj.currMonthConfirmAmount}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">当月已确认金额</div>
        </div>

        <div>
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statisticsObj.yearConfirmAmount}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">全年已确认金额</div>
        </div>
      </section>
      <div class="line-box"></div>
      <section class="flex-1">
        <div class="margin-bottom-30">
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statisticsObj.currMonthIncomeAmount}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">当月收入总额（不含税）</div>
        </div>

        <div>
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statisticsObj.yearIncomeAmount}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">全年收入总额（不含税）</div>
        </div>
      </section>
      <div class="line-box"></div>
      <section class="flex-1">
        <div class="margin-bottom-30">
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statisticsObj.currMonthTaxAmount}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">当月增值税总额</div>
        </div>

        <div>
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statisticsObj.yearTaxAmount}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">全年增值税总额</div>
        </div>
      </section>
    </section>

    <el-tabs class="margin-top-20 has-tab-header-border" v-model="activeTab" @tab-click="tabClick">
      <template v-for="item in typeList">
        <el-tab-pane :key="item.key" :name="item.key" :label="item.name">
          <cash-in-list :active-tab="item.key" :ref="item.key" :charge-list="chargeList" :asset-type-list="assetTypeList"></cash-in-list>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
  import { apiConstant, apiClientList, apiContractList, apiChargeList } from '../../api/billManage';
  import { apiCalculateStatistics } from '../../api/financeCalculate';
  import cashInList from './components/cashInList.vue';
  import { apiPactConstant } from '@a/index';

  export default {
    name: 'bill',
    data() {
      return {
        activeTab: '1',
        typeList: [
          { key: '1', name: '本财年全部收入' },
          { key: '2', name: '本财年租金收入'},
          { key: '3', name: '本财年管理费收入'},
          { key: '4', name: '本财年其他收入' },
          { key: '5', name: '全部收入' },
        ],
        chargeList:[],//费项
        assetTypeList:[],//资产类型
        statisticsObj: {},
      };
    },
    mounted() {
      this.initSonElement();
      this.getConstant();
      this.getBillCount();
    },
    methods: {
      //统计
      async getBillCount() {
        let res = await apiCalculateStatistics({accountingType:1});
        this.statisticsObj = res;
      },

      //常量
      async getConstant() {
        let res = await apiPactConstant();
        this.chargeList = res.billType
        this.assetTypeList = res.spaceType
      },

      //切换tab
      tabClick(tab, event) {
        this.activeTab = tab.name;
        this.initSonElement();
      },

      //子组件初始化
      initSonElement() {
        this.$nextTick(() => {
          this.$refs[this.activeTab] && this.$refs[this.activeTab][0].init();
        });
      },
    },
    components: { cashInList },
  };
</script>

<style lang="scss" scoped>
  .line-box {
    width: 1px;
    height: 80px;
    background: #D8D8D8;
  }

  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
</style>
